import { useState, useEffect } from 'react'
import SearchBar from './components/searchbar'
import ProductTable from './components/productTable'
import styled from 'styled-components'
// import styled from 'style'

// 受控组件： 受控逻辑
// 高阶组件， 自定义hook ui
const Product = () => {

  // useEffect(() => {
  //   throw Error('抛出错误')
  // }, [])

  return <ProductContainer>
    <div className="search-bar-wrapper">
      {/* <SearchBar /> */}
    </div>
    <div className="product-table-wrapper">
      <ProductTable />
    </div>
  </ProductContainer>
}

export default Product;


const ProductContainer = styled.div`
 width: 100%;
 height: 100%;
 overflow: auto;
 .search-bar-wrapper {
   width: 90%;
   padding: 5%;
   margin:0 auto;
   border: 1px solid #ccc;
 }
 .product-table-wrapper {
    width: 90%;
    padding: 5%;
    margin: 0 auto;
    /* height: 1000px; */
    overflow: auto;
    border: 1px solid #ccc;
    max-height: 600px;
  }

`;
